<template>
	<view>
		<view class="cu-list menu card-menu" style="margin-bottom: 10upx;" >
			<view class="cu-item">
				<label>
					<radio-group @change="handleChecked" >
						<radio :checked="item.checked" style="transform:scale(0.7);" class="radio orange" value="complete" />
					</radio-group>
				</label>
				<view class="content">
					<text class="text-black" style="font-size:30upx;" :class="item.checked?'complete-style':''">
						{{item.content}}
					</text>
				</view>
				<!-- 修改 -->
				<view class="update-item" @tap="handleUpdate">
					<text class="cuIcon-edit text-orange icon-style"></text>
				</view>
				<!-- 删除 -->
				<view class="delete-item" @tap="handleDelete">
					<text class="cuIcon-delete text-orange icon-style"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'list-item',
		props: ['item'],
		methods: {
			handleChecked() {
				this.$emit('handleChecked', this.item.id)
			},
			handleUpdate() {
				this.$emit('handleUpdate', this.item.id)
			},
			handleDelete() {
				this.$emit('handleDelete', this.item.id)
			}
		}
	}
</script>

<style lang="scss">
.complete-style {
	text-decoration: line-through;
}
.update-item {
	margin-right: 30upx ;
}
.icon-style {
	font-size: $uni-font-size-lg;
}
.content {
	margin: 0 20upx;
}
</style>
